<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content">
    <button shiro:hasPermission="production:query:print" class="btn btn-info pull-right" onclick="Print('#print')">打印</button>
    <a class="btn btn-success pull-right" th:if="${MakeSheet.status==5}" onclick="selectAll()" style="margin-right: 7px;" id="selectAll">
        <span class="Bold">查看完整清单</span>
    </a>
    <div class="row" style="margin-top: 64px">
        <div class="col-xs-10 col-xs-offset-1">
            <div id="print">
                <table id="t1" class="t1">
                    <thead style="display: table-header-group">
                    <tr>
                        <td colspan="11">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px;font-size: 12px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px;font-size: 12px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td rowspan="2" colspan="3" style="width: 200px;height: 100px;padding: 5px">
                            <div id="qrCode-div" style="display: none"></div>
                            <img id="qr-img" width="80px" height="80px">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="11" style="font-size: 16px;letter-spacing: 4px;">
                           制作件清单变更单
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="width: 8%;font-size: 12px">项目编号</td>
                        <td style="width: 10%;font-size: 12px">
                            [[${MakeSheet.proCode}]]
                        </td>
                        <td style="width: 8%;font-size: 12px">项目名称</td>
                        <td colspan="3" style="width: 30%;font-size: 12px">
                            [[${MakeSheet.proName}]]
                        </td>
                        <td style="width: 8%;font-size: 12px">项目数量</td>
                        <td style="width: 6%;font-size: 12px">
                            [[${MakeSheet.proNum}]]
                        </td>
                        <td style="width: 6%;font-size: 12px">类型</td>
                        <td style="width: 9%;font-size: 12px">
                            [[${MakeSheet.special}]]
                        </td>
                        <td style="width: 6%;font-size: 12px">部分</td>
                        <td style="width: 9%;font-size: 12px">
                            [[${MakeSheet.part}]]
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="width: 4%;">序号</td>
                        <td colspan="2">图号</td>
                        <td colspan="2">图名</td>
                        <td style="width: 8%">数量</td>
                        <td colspan="2">制作件类型</td>
                        <td style="width: 6%">操作类型</td>
                        <td colspan="2">备注</td>
                        <td>变更原因</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="plan : ${changes}">
                        <td th:if="${planStat.index == 0}" th:rowspan="${planStat.size}">更改前</td>
                        <td th:text="${planStat.count}">1</td>
                        <td style="text-align:left;" colspan="2" th:text="${plan.drawNo}" tyle="text-align:left;"></td>
                        <td colspan="2" th:text="${plan.drawName}"></td>
                        <td th:text="${plan.drawNum}"></td>
                        <td colspan="2" th:text="${plan.makeType}"></td>
                        <td></td>
                        <td colspan="2" th:text="${plan.remark}"></td>
                        <td></td>
                    </tr>
                    <tr th:each="plan : ${changes}" th:class="${planStat.index == 0 ? 'after-tr' : ''}">
                        <td th:if="${planStat.index == 0}" th:rowspan="${planStat.size}">更改后</td>
                        <td th:text="${planStat.count}">1</td>
                        <td colspan="2" th:text="${plan.afterDrawNo}" th:style="${plan.technologyChange==2?'color:red':''}+';text-align:left'"></td>
                        <td colspan="2" th:text="${plan.afterDrawName}" th:style="${plan.technologyChange==2?'color:red':''}"></td>
                        <td th:text="${plan.afterDrawNum}" th:style="${plan.technologyChange==2?'color:red':''}"></td>
                        <td colspan="2" th:text="${plan.afterMakeType}" th:style="${plan.technologyChange==2?'color:red':''}"></td>
                        <td th:text="${plan.technologyChange==3?'新增': (plan.technologyChange==2?'删除': (plan.technologyChange==1?'修改':''))}"></td>
                        <td colspan="2" th:text="${plan.afterRemark}" th:style="${plan.technologyChange==2?'color:red':''}"></td>
                        <td th:style="${plan.technologyChange==2?'color:red':''}" th:text="${plan.changeReason}"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="row" style="font-size: 14px;line-height: 200%;">
                    <div class="col-xs-3" style="padding-left: 0;font-size: 12px ">提报人：[[${MakeSheet.createNameOne}]]&nbsp;&nbsp;[[${#dates.format(MakeSheet.createTime,'yyyy.MM.dd')}]]</div>
                    <div class="col-xs-3" style="font-size: 12px">联系电话：[[${MakeSheet.postTel}]]</div>
                    <div class="col-xs-3" style="font-size: 12px">审核：<span th:each="p : ${process}" th:if="${pStat.count == 1}" style="font-size: 12px" id="time2">[[${p.verifyName}]]&nbsp;&nbsp;[[${#dates.format(p.verifyTime,'yyyy.MM.dd')}]]</span></div>
                    <div class="col-xs-3" style="font-size: 12px">批准：<span th:each="p : ${process}" th:if="${pStat.count == 2}" style="font-size: 12px" id="time3">[[${p.verifyName}]]&nbsp;&nbsp;[[${#dates.format(p.verifyTime,'yyyy.MM.dd')}]]</span></div>
                </div>
            </div>
        </div>
        <div class="col-xs-1">
            <table id="t2" class="t2">
                <thead style="display: table-header-group">
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                <tr><td></td></tr>
                </thead>
                <tbody>
                <tr th:each="plan : ${changes}">
                    <td style="text-align: left">
                        <a target="_blank" style="margin-left: -10px" th:if="${plan.url != null}" th:href="${plan.url}">附件</a>
                    </td>
                </tr>
                <tr th:each="plan : ${changes}">
                    <td style="text-align: left">
                        <a target="_blank" style="margin-left: -10px" th:if="${plan.afterUrl != null}" th:href="${plan.afterUrl}">附件</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let gloDeptName = toUtf8('辽宁忠旺机械设备制造有限公司 ' + [[${MakeSheet.deptName}]] + ' ' + [[${MakeSheet.sectionName}]]);

    $("#qrCode-div").qrcode({
        width: 80,
        height: 80,
        text: gloDeptName
    });


    $(function () {

        //textarea高度随文本内容变化，且不出现滚动条
        $('textarea').each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight)+ 'px;overflow-y:hidden;width:100%;border: none; resize: none;cursor: pointer;bgcolor:#ffffff');
        }).on('td', function () {

        });

        $("#t1 thead tr").each(function (i,v) {
            $("#t2 thead tr").eq(i).find("td").first().height($(this).find("td:first").height());
        })

        $("#t1 tbody tr").each(function (i,v) {
            $("#t2 tbody tr").eq(i).find("td").first().height($(this).find("td:last").height());
        })

        $("#t1 tr").each(function (i,v) {
            $("#t2 tr").eq(i).find("td").first().height($(this).find("td:first").height());
        })
        let c = document.getElementsByTagName('canvas')[0];
        $("#qr-img").attr("src", c.toDataURL("image/png"));
    });

    /** 查看变更后的所有数据*/
    function selectAll(){
        debugger
        let proCode = [[${MakeSheet.proCode}]];
        let special = [[${MakeSheet.special}]];
        let part = [[${MakeSheet.part}]];
        let time1 = [[${#dates.format(MakeSheet.createTime,'yyyy.MM.dd')}]];
        let time2 =  $("#time2").text();
        let time3 = $("#time3").text();
        part =part.replace("#",'%23')

        // location.href = ctx + 'production/query/selectAll?proCode=' + proCode + '&special='+ special + '&part='+ part

        window.open(ctx + 'production/query/selectAll?proCode=' + proCode + '&special='+ special + '&part='+ part
            +'&time1='+ time1 + '&time2=' + time2 + '&time3=' + time3);

    }

</script>
</body>
</html>
